import React from "react"
// 导入路由组件
import {HashRouter,Route,Link} from "react-router-dom"
// 导入需要的ant Design
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;
// 引入模块化的scss样式
import styles from "@/css/app.scss"
//导入子组件模块
import HomeContainer from "@/components/HomeContainer.jsx"
import MovieContainer from "@/components/MovieContainer.jsx"
import AboutContainer from "@/components/AboutContainer.jsx"

export default class App extends React.Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    render(){
        return <HashRouter>
           <Layout className="layout" style={{height:"100%"}}>
               {/* Header头部区 */}
                <Header>
                    <div className={styles.logo} />
                    <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                    style={{ lineHeight: '64px' }}
                    >
                    <Menu.Item key="home"><Link to="/home">首页</Link></Menu.Item>
                    <Menu.Item key="movie"><Link to="/movie/in_theaters/1">电影</Link></Menu.Item>
                    <Menu.Item key="about"><Link to="/about">关于</Link></Menu.Item>
                    </Menu>
                </Header>
                {/* Content主体区域 */}
                <Content style={{backgroundColor:'#fff'}}>
                   <Route path="/home" component={HomeContainer}></Route>
                   <Route path="/movie" component={MovieContainer}></Route>
                   <Route path="/about" component={AboutContainer}></Route>
                </Content>
                {/* Footer底部区域 */}
                <Footer style={{ textAlign: 'center' }}>
                    啵啵集团---@2019 form 邵尤卿
                </Footer>
        </Layout>
        </HashRouter>
    }
}